<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				修改登录密码
			</div>
		</template>
		<div class="mb-20px">
			<div>
				<el-form label-position="top" label-width="100px" :model="formData" :rules="rules" ref="ruleFormRef">
					<el-form-item label="原密码" prop="oldPassword">
						<el-input v-model="formData.oldPassword" show-password type="password" placeholder="请输入原登录密码" />
					</el-form-item>
					<el-form-item label="新密码" prop="newPassword">
						<el-input v-model="formData.newPassword" show-password type="password" placeholder="请输入新登录密码" />
					</el-form-item>
					<el-form-item label="新密码确认" prop="confirmPassword">
						<el-input v-model="formData.confirmPassword" show-password type="password"
							placeholder="请再次输入新密码确认" />
					</el-form-item>
				</el-form>
			</div>
			<div class="mt-60px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm(ruleFormRef)"> 确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'

interface IProps {
	isShow: boolean
	setMethods?: string;
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm'])


const formData = ref<any>({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
});
const ruleFormRef = ref<FormInstance>()
// 表单校验
const validateConfirmPassword = (rule: any, value: string, callback: Function) => {
	if (value === '') {
		callback(new Error('请再次输入密码'));
	} else if (value !== formData.value.newPassword) {
		callback(new Error('两次输入密码不一致!'));
	} else {
		callback();
	}
};
const rules = ref<FormRules>({
	oldPassword: [
		{ required: true, message: '请输入旧密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
	],
	newPassword: [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '长度在 6 到 20 个字符' }
	],
	confirmPassword: [
		{ validator: validateConfirmPassword, trigger: 'blur' }
	]
})



const close = () => {
	emits('close', false)
}

const confirm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid:boolean ):any => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!')
			return false
		}
	})
	emits('confirm')
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--label-top .el-form-item__label:before {
	display: none;
}

::v-deep .el-input__wrapper {
	height: 50px;
}

::v-deep .el-input__inner {
	font-size: 18px;
}
</style>
